<template>
  <div class="activity-container">
    <!-- 分三个部分 活动列表 添加列表  编辑列表 -->
    <div class="activity-table" v-show="showvisitable">
      <div class="activityquery">
        <el-button type="primary" class="primary el-icon-plus" size="mini" @click="add">添加</el-button>
        <el-select clearable v-model="placevalue" placeholder="类型" class="select1 inputbox" @change="places($event)">
          <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
          </el-option>
        </el-select>
        <div class="inputbox">
          <el-input v-model="inputvalue" placeholder="活动名称"></el-input>
        </div>
        <el-button type="primary" class="querybutton" size="mini" @click="querytable()">查询</el-button>
        <el-button type="primary" class="querybutton" size="mini" @click="reset()">重置</el-button>
      </div>
      <div class="activitytabledata">
        <el-table :data="tableData" border size="mini" style="width: 100%" :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }">
          <el-table-column type="index" prop="activityId" label="编号" width="70" align="center">
          </el-table-column>
          <el-table-column prop="activityName" label="活动名称" width="200" align="center">
          </el-table-column>
          <el-table-column prop="typeId" label="类型" width="100" align="center">
            <template slot-scope="scope">
              {{ scope.row.typeId }}
              <!-- <template v-if="scope.row.typeId == '1'">等待支付</template>
              <template v-if="scope.row.typeId == 'cancelPay'">取消支付</template> -->
            </template>
          </el-table-column>
          <el-table-column prop="salePrice" label="售价" width="100" align="center">
          </el-table-column>
          <el-table-column prop="stockCount" label="库存" width="100" align="center">
          </el-table-column>
          <el-table-column prop="showTime" label="预热时间" width="200">
          </el-table-column>
          <el-table-column prop="beginTime" width="200" label="活动时间">
            <template slot-scope="scope">
              <span>{{ scope.row.beginTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="endTime" width="200" label="结束时间">
            <template slot-scope="scope">
              <span>{{ scope.row.endTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ifpass" label="是否审核" width="100" align="center">
            <!-- <template slot-scope="{ row, $index }">
              <button :class="row.ifpass == '未审' ? 'redcolor' : 'bluecolor'" size="mini" id="shenhe"
                @click="shenhe(row, $index)">
                <span>{{ row.ifpass }}</span>
              </button>
            </template> -->
          </el-table-column>
          <el-table-column prop="address" label="操作" width="200px" align="center">
            <template slot-scope="scope">
              <el-button class="edit el-icon-edit" size="mini" @click="edit(scope.row)">修改</el-button>
              <el-button class="delt el-icon-delete" size="mini" @click="dele(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <el-pagination
        background
        :pager-count="2"
        layout="prev, pager, next"
        :total="tableData.pageCount"
        @current-change="pager"
      > -->
      <el-pagination align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[10, 15, 20]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
      </el-pagination>
    </div>
    <div class="activity-add" v-show="!showvisitable">
      <p class="divider">
        <el-divider content-position="left" v-show="flagvalue">{{
          addoreditvalue 
        }}</el-divider>
      </p>
      <!-- 商品名称  -->
      <div class="inputboxname">
        <span>活动名称</span>
        <el-input v-model="inputname" placeholder="请输入活动名称" class="elinput"></el-input>
      </div>
      <!-- 活动类型  -->
      <div class="activitytype">
        <div class="activitytypeone">
          <span class="leixing"> 活动类型 </span>
          <ul class="attrul">
            <li v-for="(item, index) in typearrlist" :key="index" @click="rowClick(index, item)">
              <span class="sty" :class="{ activeClass: active == index }">{{item.title}}</span>
              <i class="el-icon-check" :class="{ act: active == index }"></i>
            </li>
          </ul>
        </div>
      </div>
      <!-- 团购 -->
      <div class="groupbuying" v-show="block0">
        <div class="block">
          <span class="demonstration">预热时间</span>
          <el-date-picker v-model="selectdata" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <div class="block">
          <span class="demonstration">开始时间</span>
          <el-date-picker v-model="startdata" type="datetime" placeholder="选择开始日期时间"
            value-format="yyyy-MM-dd  HH:mm:ss">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <div class="block">
          <span class="demonstration">结束时间</span>
          <el-date-picker v-model="enddata" type="datetime" placeholder="选择结束日期时间" value-format="yyyy-MM-dd  HH:mm:ss">
          </el-date-picker>
          <!-- <span class="stars">*</span> -->
        </div>
        <p>
          <span>售价</span>
          <el-input placeholder="请输入售价" v-model.number="shoppingmore.sellingprice">
          </el-input>
          <span class="stars">*</span>
        </p>
        <p>
          <span id="vip">会员价</span>
          <el-input placeholder="请输入会员价" v-model.number="shoppingmore.vipprice">
          </el-input>
          <span class="stars">*</span>
        </p>
        <p>
          <span>原价</span>
          <el-input placeholder="请输入原价" v-model.number="shoppingmore.originalprice">
          </el-input>
          <span class="stars">*</span>
        </p>
        <div class="groupbuying-div">
          <span>参与人数</span>
          <el-input placeholder="参与人数" v-model="shoppingmore.peoplenumber">
          </el-input>
          <i class="stars">*</i>
        </div>
        <div class="groupbuying-div">
          <span>库存</span>
          <el-input placeholder="库存" v-model.number="shoppingmore.repertory">
          </el-input>
          <i class="stars">*</i>
        </div>

        <p class="shenhe" id="shenhes">
          <i class="shenhespan">审核</i>
          <el-switch v-model="switchs" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
            inactive-value="0">
          </el-switch>
        </p>
      </div>
      <!-- 秒杀 -->
      <div class="seckill groupbuying" v-show="block1">
        <div class="block">
          <span class="demonstration">预热时间</span>
          <el-date-picker v-model="selectdata" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <div class="block">
          <span class="demonstration">开始时间</span>
          <el-date-picker v-model="startdata" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <div class="block">
          <span class="demonstration">结束时间</span>
          <el-date-picker v-model="enddata" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <div>
          <p class="shenhe">
            <i class="shenhespan">审核</i>
            <el-switch v-model="switchs" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
              inactive-value="0">
            </el-switch>
          </p>
        </div>
      </div>
      <!-- 组合 -->
      <div class="groupbuying" v-show="block2">
        <div class="block">
          <span class="demonstration">预热时间</span>
          <el-date-picker v-model="selectdata" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <div class="block">
          <span class="demonstration">开始时间</span>
          <el-date-picker v-model="startdata" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <div class="block">
          <span class="demonstration">结束时间</span>
          <el-date-picker v-model="enddata" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <p>
          <span>售价</span>
          <el-input placeholder="请输入售价" v-model="shoppingmore.sellingprice">
          </el-input>
          <span class="stars">*</span>
        </p>
        <p>
          <span id="vip">会员价</span>
          <el-input placeholder="请输入会员价" v-model="shoppingmore.vipprice">
          </el-input>
          <span class="stars">*</span>
        </p>
        <p>
          <span>原价</span>
          <el-input placeholder="请输入原价" v-model="shoppingmore.originalprice">
          </el-input>
          <span class="stars">*</span>
        </p>

        <div class="groupbuying-div">
          <span>库存</span>
          <el-input placeholder="库存" v-model="shoppingmore.repertory">
          </el-input>
          <span class="stars">*</span>
        </div>
        <!-- <p id="picture"> -->
        <!-- 活动封面
          <el-button id="imgpath">点击上传</el-button><br />
          <i id="picturebox">
           
            <i class="el-icon-close close" @click="close"></i>
          </i>
          <el-upload action="/file/fileMapping/uploadAvatarModel" list-type="picture-card"
            :on-success="handleAvatarSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </p> -->
        <p id="picture">
          图片：
          <!-- <el-button id="imgpath">点击上传</el-button><br /> -->
          <el-upload action="/file/fileMapping/uploadAvatarModel" list-type="picture-card"
            :on-success="handleAvatarSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <!-- <img v-if="bannerPath" :src="bannerPath" alt="" class="bannerpath"> -->
          <!-- <img style="width: 200px; height: 200px" :src="imgpath" v-if="imgpath" alt="" v-show="block2"
            ref="picturebox" /> -->

          <!-- <i class="el-icon-close" v-show="flag"></i> -->
          <!-- <span class="imgpath picturebox" v-show="!flag">我是图片 <i class="el-icon-close close" @click="close" ></i></span> -->
        </p>

        <div class="quilleditor">
          使用说明：
          <quill-editor v-model="str" ref="myQuillEditor" :options="editorOption">
          </quill-editor>
        </div>
        <p id="group">
          <i class="shenhespan">审核</i>
          <el-switch v-model="switchs" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
            inactive-value="0">
          </el-switch>
        </p>
      </div>
      <!-- 权益兑换 -->
      <div class="seckill groupbuying" v-show="block3">
        <div class="block">
          <span class="demonstration">预热时间</span>
          <el-date-picker v-model="selectdata" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <div class="block">
          <span class="demonstration">开始时间</span>
          <el-date-picker v-model="startdata" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <div class="block">
          <span class="demonstration">结束时间</span>
          <el-date-picker v-model="enddata" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <br />
        <p class="shenhe">
          <i class="shenhespan">审核</i>
          <el-switch v-model="switchs" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
            inactive-value="0">
          </el-switch>
        </p>
      </div>
      <!-- 轮播活动  -->
      <!-- <div class="seckill groupbuying" v-show="block4">
        <div class="block">
          <span class="demonstration">预热时间</span>
          <el-date-picker v-model="selectdata" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <div class="block">
          <span class="demonstration">开始时间</span>
          <el-date-picker v-model="startdata" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <div class="block">
          <span class="demonstration">结束时间</span>
          <el-date-picker v-model="enddata" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <br />
        <div class="quilleditor">
          活动简介:
          <quill-editor v-model="str" ref="myQuillEditor" :options="editorOption">
          </quill-editor>
        </div>
        <p id="group">
          <i class="shenhespan">审核</i>
          <el-switch v-model="switchs" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
            inactive-value="0">
          </el-switch>
        </p>
      </div> -->
      <!-- 混合订单  -->
      <div class="seckill groupbuying" v-show="block5">
        <div class="block">
          <span class="demonstration">预热时间</span>
          <el-date-picker v-model="selectdata" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <div class="block">
          <span class="demonstration">开始时间</span>
          <el-date-picker v-model="startdata" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <div class="block">
          <span class="demonstration">结束时间</span>
          <el-date-picker v-model="enddata" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
          <span class="stars">*</span>
        </div>
        <br />
        <p class="shenhe">
          <i class="shenhespan">审核</i>
          <el-switch v-model="switchs" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
            inactive-value="0">
          </el-switch>
        </p>
      </div>

      <!-- 活动商品 表格 -->
      <el-form ref="form" label-width="80px" :model="adds">
        <!-- 活动商品 -->
        <el-form-item label="活动商品">
          <el-button icon="el-icon-plus" class="plus" @click="addlist">添加商品</el-button>
          <el-table :data="productSpecs" size="mini" border style="width: 95%" :header-cell-style="{
              color: '#fff',
              background: '#6090EC',
              fontSize: '11px',
              fontWeight: 'normal',
            }">
            <el-table-column type="index" label="编号" width="80px" align="center" prop="productId">
            </el-table-column>
            <!-- <el-table-column prop="productName" label="商品图片" width="180"> -->
            <!-- eslint-disable-next-line -->
            <!-- <template slot-scope="{ row, $index }"> </template> -->
            <!-- </el-table-column> -->
            <el-table-column prop="specName" label="商品规格" width="180">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.specName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="marketPrice" label="售价" width="width">
            </el-table-column>
            <el-table-column prop="memberPrice" label="会员价" width="width">
            </el-table-column>
            <el-table-column prop="salePrice" label="原价" width="width">
            </el-table-column>
            <el-table-column prop="stockCount" label="剩余库存" width="width">
            </el-table-column>
            <el-table-column prop="stockCounts" label="使用库存" width="width">
              <template slot-scope="scope">
                <!-- <el-input
                  ref="specName"
                  v-model="scope.row.stockCounts"
                  placeholder="0"
                ></el-input> -->
                <input type="text" name="" id="" :value="scope.row.stockCounts" />
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="width">
              <template slot-scope="scope">
                <!-- <el-input
                  ref="specName"
                  v-model="scope.row.sort"
                  placeholder="0"
                ></el-input> -->

                <input type="text" v-model.number="scope.row.sort" />
              </template>
            </el-table-column>

            <el-table-column label="操作" width="width">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"><i
                    class="el-icon-delete"></i></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-button type="primary" @click="addOrUpdateSpu" class="addOrUpdateSpu el-icon-folder">保存</el-button>
        <el-button @click="cancel" class="cancel el-icon-close">关闭</el-button>
      </el-form>
      <!-- 添加活动商品的弹出框 -->
      <el-dialog title="商品分类" :visible.sync="dialogTableVisible" id="diag">
        <el-form :model="addShop" ref="addShop" :inline="true">
          <el-form-item label="商品分类">
            <el-select v-model="addShop.typeId" clearable>
              <el-option v-for="item in fentypeoption" :key="item.value" :label="item.names" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品属性">
            <el-select v-model="addShop.propertyTypeId" clearable>
              <el-option v-for="(item, index) in property" :key="index" :label="item.names" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称">
            <!-- <el-select v-model="addShop.productName" placeholder="请输入商品名" clearable :popper-append-to-body="false">
              <el-option v-for="item in shangnameoption" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select> -->
            <el-input v-model="addShop.productName" placeholder="请输入商品名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="querydiag">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="shop_b" v-for="(item, index) in table" :key="index">
          <div class="shop_b_t">{{ item.productName }}</div>
          <div class="shop_b_c">
            <span></span>
            <span>规格</span>
            <span>售价</span>
            <span>原价</span>
            <span>库存</span>
          </div>
          <div class="shop_b_c" v-for="(items, indexs) in item.productSpecs" :key="indexs">
            <span>
              <el-checkbox @change="checkbox(items, indexs, item)" v-model="items.is"></el-checkbox>
            </span>
            <span>{{ items.specName }}</span>
            <span>{{ items.salePrice }}</span>
            <span>{{ items.marketPrice }}</span>
            <span>{{ items.stockCount }}</span>
          </div>
        </div>
        <el-button @click="sure($event)">确定</el-button>
        <el-button @click="cancels">取消</el-button>
      </el-dialog>
    </div>
    <!-- 编辑列表 -->
    <div class="activity-edit" v-show="showvisitable"></div>
  </div>
</template>

<script>
  // import { json } from 'stream/consumers';

  export default {
    name: "activity",
    data() {
      return {
        total: 0,
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        // 添加活动商品列表的表单
        addShop: {
          typeId: 0,
          propertyTypeId: 0,
          productName: "",
        },
        requestonjList: [],
        dialogImageUrl: "",
        checkList: [],
        checked: false,
        typeid: null, //活动类型的数组
        imgpath: "",
        selectdata: null,
        startdata: null,
        enddata: null,
        inputname: "", //商品名称
        flagvalue: null, //标识添加值还是编辑值
        addoreditvalue: "", //添加的值
        editvalue: "", //编辑的值
        fentype: "", //绑定弹出框商品分类的value值

        attrvalue: "", //绑定商品属性的value值
        shangname: "", //绑定商品名称的value值
        shangnameoption: [], //绑定商品名称的数组
        active: 0,
        block0: true,
        block1: false,
        block2: false,
        block3: false,
        block4: false,
        block5: false,
        quanyi: false,

        typearrlist: [{
            id: 0,
            title: "团购"
          },
          {
            id: 1,
            title: "秒杀"
          },
          {
            id: 2,
            title: "组合"
          },
          {
            id: 3,
            title: "权益兑换"
          },
        ],
        editorOption: {
          placeholder: "请在这里输入",
          modules: {
            toolbar: [
              ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
              ["blockquote", "code-block"], // 引用，代码块
              [{
                header: 1
              }, {
                header: 2
              }], // 标题，键值对的形式；1、2表示字体大小
              [{
                list: "ordered"
              }, {
                list: "bullet"
              }], // 列表
              [{
                script: "sub"
              }, {
                script: "super"
              }], // 上下标
              [{
                indent: "-1"
              }, {
                indent: "+1"
              }], // 缩进
              [{
                direction: "rtl"
              }], // 文本方向
              [{
                size: ["small", false, "large", "huge"]
              }], // 字体大小
              [{
                header: [1, 2, 3, 4, 5, 6, false]
              }], // 几级标题
              [{
                color: []
              }, {
                background: []
              }], // 字体颜色，字体背景颜色
              [{
                font: [
                  false,
                  "heiti",
                  "songti",
                  "kaiti",
                  "lishu",
                  "arial",
                  "monospace",
                ],
              }, ], // 字体
              [{
                align: []
              }], // 对齐方式
              ["clean"], // 清除字体样式
              ["image", "video"], // 上传图片、上传视频
            ],
          },
        },
        flag: null,
        str: null,

        // 弹框的第一条数据
        list1: [],
        gridData: [], //弹框的表格数据
        dialogTableVisible: false, //控制弹框
        mallActivityProducts: [], //添加表格数据
        placevalue: "",
        value1: "",
        switchs: "", //审核的状态
        adds: {}, //收集的数据
        showvisitable: true,
        options: [{
            id: 0,
            value: "全部",
            label: "全部",
          },
          {
            id: 10,
            value: "团购",
            label: "团购",
          },
          {
            id: 20,
            value: "秒杀",
            label: "秒杀",
          },
          {
            id: 30,
            value: "组合商品",
            label: "组合商品",
          },
          {
            id: 40,
            value: "权益兑换",
            label: "权益兑换",
          },
        ],
        //
        // 添加活动时传参的规格数组
        productSpecs: [],

        input: "",
        //收集添加的表格数据
        collection: {
          inputboxname: "", //活动名称
          sellingprice: "", //售价
          vipprice: "", //会员价
          originalprice: "", //原价
        },
        //   团购收集的数组
        shoppingmore: {
          sellingprice: null, //售价
          vipprice: null, //会员价
          originalprice: null, //原价
          peoplenumber: 0, //参与人数
          repertory: null, //库存
        },

        tableData: [], //表格的数组
        inputvalue: "",
        table: [],
        activityId: null,
        arrlist: [],
        empty: [], //
        srr: null,
        productId: null,
        productSpecId: null,
        stockCounts: 0,
        salePrices: null,
        sort: 0,
        property: [{
            id: 1,
            names: "实物",
          },
          {
            id: 2,
            names: "活动码",
          },
          {
            id: 3,
            names: "会员卡",
          },
        ],
        fentypeoption: [{
            id: 0,
            names: "商品分类",
          },
          {
            id: 1,
            names: "购卡专区",
          },
          {
            id: 2,
            names: "爆款单品",
          },
        ], //弹出框商品分类的数组

        diagarr: [],
        AactivityId: "", //   活动的主键id
        busproductId: "", //商品的主键id
        pageNum: "", //拿到当前页码
      };
    },
    mounted() {
      localStorage.setItem("pageNum", 1);
      localStorage.setItem("pageSize", 10);
      this.activityList(); //活动列表
    },
    methods: {
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.activityList();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.currentPage = value;
        this.activityList();
        // orders = res.data;
      },
      // 页码点击切换 事件
      // element UI 封装了这个事件 currentPage里面存放的就是当前页码
      pager: function (currentPage) {
        //将当前页码赋值给pageNum
        this.pageNum = currentPage;
        this.$axios.activityList({
          pageSize: this.pageNum
        });
        // 得到当前页码 请求下一页数据
        // axios({
        //   url: baseUrl + "product-comments/getCommentsByProId/" + this.productId,
        //   methods: "get",
        //   params: {
        //     pageNum: this.pageNum,
        //     pageSize: this.pageSize,
        //   },
        // }).then((res) => {
        //   //得到数据 重新渲染即可
        //   let vo = res.data.data;
        //   this.productComments = vo;
        //   this.pageCount = vo.total;
        // });
      },
      shenhe(item, index) {
        this.tableData.splice(index, 1);
        this.$message({
          type: "success",
          message: "操作成功",
        });
      },
      // 请选择
      places(value) {
        this.placevalue = value;
        // this.place=value
        // console.log(this.place)
      },
      // 保存按钮
      addOrUpdateSpu() {
        this.showvisitable = true;

        // 如果flagvalue为true 代表你点添加 在保存之前掉添加的接口
        if (this.flagvalue == true) {
          this.addActivityDetails();
        } else {
          // 如果flagvalue为flase 代表你点编辑按钮了 在保存之前掉修改
          this.updateActivityDetails(this.AactivityId, this.busproductId);
        }

        // 点击保存的时候调用 修改活动详情
      },
      // 后台添加活动接口
      addActivityDetails() {
        if(this.typeid == 0){
          this.typeid=10
        }else if(this.type==null){
           this.typeid=10
        }
        // console.log(this.diagarr)
        this.$axios
          .addActivityDetails({
            activityName: this.inputname,
            typeId: this.typeid,
            showTime: this.selectdata,
            beginTime: this.startdata,
            endTime: this.enddata,
            salePrice: this.shoppingmore.sellingprice,
            memberPrice: this.shoppingmore.thisvipprice,
            originalPrice: this.shoppingmore.originalprice,
            memberPrice: this.shoppingmore.vipprice,
            stockCount: this.shoppingmore.repertory,
            ifpass: this.switchs,
            mallActivityProducts: this.diagarr, //将他弹框的东西放进这个数组里面才可以
          })
          .then((res) => {
            console.log("添加成功了", res);
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "添加商品成功",
              });
            }
          });
      },
      // 后台修改活动详情
      updateActivityDetails(AactivityId, busproductId) {
        console.log();
        this.$axios
          .updateActivityDetails({
            activityId: AactivityId,
            activityName: this.inputname,
            typeId: this.typeid,
            showTime: this.selectdata,
            beginTime: this.startdata,
            endTime: this.endTime,
            salePrice: this.shoppingmore.sellingprice,
            memberPrice: this.shoppingmore.vipprice,
            originalPrice: this.shoppingmore.originalprice,
            stockCount: this.shoppingmore.repertory,
            imgPath: this.imgpath,
            introduce: this.str,
            ifpass: this.switchs,
            productId: busproductId,
            mallActivityProducts: this.productSpecs,
          })
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "修改商品成功",
              });
              this.activityList();
            }
          });
      },

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        console.log(file);
        this.dialogImageUrl = file.url;
      },

      //成功回调
      handleAvatarSuccess(response) {
        console.log(response);
        this.imgpath = response[0];
        console.log(this.imgpath);
        // if (this.addplanetype.planePic == "") {
        //   this.addplanetype.planePic = response[0];
        // }
      },
      // 点击确定将 选择的数据添加到这个页面中
      sure(items) {
        // console.log(items)
        this.dialogTableVisible = false;
        // 过滤选中的规格
        // let arr = [];
        // arr = this.table.filter((item) => {
        //   return item.is;
        // });
        // console.log(arr);
        // arr.forEach((items) => {
        //   items.productSpecs.filter((item) => {
        //     if (item.is) {
        //       // item.specName = items.productName + item.specName;
        //       item.productName = items.productName;
        //       item.sort = "";
        //       item.stockCounts = "";
        //       this.productSpecs.push(item);
        //       return this.productSpecs;
        //     } else {
        //     }
        //   });
        // });
        // this.productSpecs.forEach((item) => {
        //   item.specNames = item.productName + item.specName;
        // });
        // console.log(this.productSpecs);
        // arr[0].productSpecs.forEach(item=>{
        //   return item.is
        // })
        // arr[0].productSpecs.forEach(items=>{
        //   if(items.is) {
        //     let obj = {
        //       productId:items.productId,
        //       productSpecId:items.productSpecId,
        //       stockCounts:items.stockCount,
        //       salePrices:items.salePrice,
        //       // sort:0,
        //     }
        //     this.productSpecs.push(obj)
        //   }
        // })
        // console.log(this.productSpecs)
        // this.productSpecs =
      },
      cancels() {
        this.dialogTableVisible = false;
      },
      desns(item, index) {
        console.log(item, index);
        console.log("desnsdesns");
      },
      // 当选项值发生变化的时候出发
      checkbox(items, index, item) {
        console.log(item);
        this.busproductId = item.productId; //每次点中复选框拿到商品的主键id
        // consoles
        if (items.is) {
          this.diagarr.push(items);
        } else {
          this.diagarr.splice(this.diagarr.indexOf(items), 1);
        }
        items.stockCounts = items.stockCount;
        items.salePrices = items.salePrice;
        items.productId = this.busproductId;
        items.sort = index;
        //  let  pp=Object.assign(this.productSpecs,{items})
        // console.log(pp)
        //  let a = {
        // 		activityProductId:1,
        // 		marketPrice:1,
        // 		memberPrice:2,
        // 		productId:3,
        // 	}

        // let b= Object.assign(a,{marketPrice:12,memberPrice:13,productId:14})
        // console.log(baz)
        // console.log(this.productSpecs);

        //  )

        // this.productSpecs.push(items);
        // console.log(this.productSpecs);

        // let result =items
        //拿到每次点中复选框的item值
        // console.log(this.productSpecs);
        // this.productSpecs([...items].keys)
        // console.log(result.keys())

        // console.log(item.productSpecs[index]);
        // if (item.productSpecs[index].is) {
        //   item.is = true;
        // } else {
        //   item.is = false;
        // }
      },
      // 点击重置清空列表
      reset() {
        this.inputvalue = null;
        this.placevalue = null;

        this.activityList(); //活动列表
      },
      // 点击表格查询商品活动数据
      querytable() {
        
      localStorage.setItem("pageNum", 1);
      localStorage.setItem("pageSize", 10);
        this.activityList({
          typeId: this.placevalue,
          activityName: this.inputvalue,
        });

        // this.$message({
        //   type: "success",
        //   message: "查询成功",
        // });
      },
      //活动列表接口
      activityList(all) {
        this.$axios
          .activityList({
            typeId: this.placevalue || 0,
            activityName: this.inputvalue || "",
          })
          .then((res) => {
            this.pageTotal = res.total;
            this.tableData = res.data;
            // console.log(this.tableData);
            console.log(res);
            let arr = JSON.parse(JSON.stringify(res.data));
            
            // arr.forEach((item) => {
            //   item.is = false;
            //   item.productSpecs.forEach((items) => {
            //     items.is = false;
            //     items.productId = item.productId;
            //   });
            // });
            this.table = arr;
            console.log(this.table);
          });
      },

      // 删除接口
      dele(row) {
        this.$confirm(`你确定删除吗`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true,
          })
          .then(() => {
            this.deleteActivityDetails(row.activityId);
            // 点击确定按钮之后发请求
           
            // 再次获取列表的数据
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      //删除函数
      deleteActivityDetails(id) {
        this.$axios.deleteActivityDetails({
          activityId: id
        }).then((res) => {
          if(res.code ==200){
             this.$message({
              type: "success",
              message: "删除成功!",
            });
              this.activityList(); //活动列表
          }
          
        });
      },
      // 点击添加按钮
      add() {
        this.flagvalue = true;
        // this.rowClick()
        this.addoreditvalue = "添加活动";
        this.showvisitable = false; //将第一个表格隐藏 展示添加页面
        // 清空之前数据
        this.inputname = "";
        this.selectdata = "";
        this.startdata = "";
        this.enddata = "";
        this.shoppingmore.sellingprice = "";
        this.shoppingmore.vipprice = "";
        this.shoppingmore.originalprice = "";
        this.shoppingmore.repertory = "";
        this.diagarr = [];
      },
      // addActivityDetails(){
      // console.log(this.add.mallActivityProducts) 拿到弹框数组的商品id传过去
      // },
      // 后台添加活动接口
      // addActivityDetails() {
      //   this.$axios
      //     .addActivityDetails({
      //       activityName: this.inputname,
      //       typeId: this.typeid,
      //       showTime: this.selectdata,
      //       beginTime: this.startdata,
      //       endTime: this.enddata,
      //       salePrice: this.shoppingmore.sellingprice,
      //       memberPrice: this.shoppingmore.thisvipprice,
      //       originalPrice: this.shoppingmore.originalprice,
      //       stockCount: this.shoppingmore.repertory,
      //       ifpass: this.switchs,
      //       mallActivityProducts: this.add.mallActivityProducts, //将他弹框的东西放进这个数组里面才可以
      //     })
      //     .then((res) => {
      //       console.log(res);
      //     });
      // },

      // 点击编辑事件
      edit(row) {
        this.imgpath = null;
        this.AactivityId = row.activityId;
        console.log(this.AactivityId);

        this.flagvalue = false;
        if (this.flagvalue == false) {
          this.addoreditvalue = row.activityName;
          this.showvisitable = false;
        }
        // 点击编辑调用 活动编辑接口
        let activityId = row.activityId;
        this.$axios.activityDetails({
          activityId: activityId
        }).then((res) => {
          this.inputname = res.data.activityName;
          if (res.data.typeId == "30") {
            this.active = 2;
          } else if (res.data.typeId == "20") {
            this.active = 1;
          } else if (res.data.typeId == "10") {
            this.active = 0;
          }
          // 获取到售价信息
          this.shoppingmore.sellingprice = res.data.salePrice;
          this.shoppingmore.vipprice = res.data.memberPrice;
          this.shoppingmore.originalprice = res.data.originalPrice;
          this.shoppingmore.repertory = res.data.stockCount;

          this.selectdata = res.data.showTime;
          this.startdata = res.data.beginTime;
          this.enddata = res.data.endTime;

          // 获取到图片的信息
          // let picture =this.$refs.picturebox;
          this.imgpath = res.data.imgPath;
          this.str = res.data.introduce;
          this.switchs = res.data.ifpass;
          this.diagarr = res.data.mallActivityProducts;
          this.diagarr.forEach((item) => {
            //  item.is=true;
            this.$set(item, "is", true);
          });

          console.log(res.data);

          // console.log(this.diagarr);
          // console.log(this.arrlist);

          // console.log(res.data);
          // 表格的数据
          // console.log(this.arrlist);

          console.log(res.data);
          // 表格的数据
        });
      },

      // 点击按钮弹出框查询
      querydiag() {
        // 添加活动商品列表
        this.activityProduct();
      },

      // 点击li的事件
      rowClick(index, row) {
        this.active = index;

        console.log(index);

        // 活动类型 拿到数据中每次点击的索引 去判断 如果拿到的第一个索引等于0 就给某个变量赋值 将变量传过去
        if (index == "3") {
          this.typeid = 40;
        } else if (index == "2") {
          this.typeid = 30;
        } else if (index == "1") {
          this.typeid = 20;
        } else if (index == "0") {
          this.typeid = 10;
        } else {
          console.log(this.typeid);
        }
        console.log(this.typeid);
        if (index == "5") {
          this.block5 = true;
          this.block0 = false;
          this.block1 = false;
          this.block2 = false;
          this.block3 = false;
          this.block4 = false;
        } else if (index == "4") {
          this.block4 = true;
          this.block0 = false;
          this.block1 = false;
          this.block2 = false;
          this.block3 = false;
          this.block5 = false;
        } else if (index == "3") {
          this.block3 = true;
          this.block0 = false;
          this.block1 = false;
          this.block2 = false;
          this.block4 = false;
          this.block5 = false;
        } else if (index == "2") {
          this.block2 = true;
          this.block0 = false;
          this.block1 = false;
          this.block3 = false;
          this.block4 = false;
          this.block5 = false;
        } else if (index == "1") {
          this.block1 = true;
          this.block0 = false;
          this.block2 = false;
          this.block3 = false;
          this.block4 = false;
          this.block5 = false;
        } else if (index == "0") {
          this.block0 = true;
          this.block2 = false;
          this.block1 = false;
          this.block3 = false;
          this.block4 = false;
          this.block5 = false;
        } else {
          return;
        }

        // if (index == "0") {
        //   this.block0 = true;
        //   this.block1 = false;
        //   this.block2 = false;
        //   this.block3 = false;
        //   this.block4 = false;
        //   this.block5 = false;
        // } else if (index == "1") {
        //   this.block1 = true;
        //   this.block0 = false;
        //   this.block2 = false;
        //   this.block3 = false;
        //   this.block4 = false;
        //   this.block5 = false;

        // } else if (index = "2") {
        //   this.block2 = true;
        //   this.block0 = false;
        //   this.block1 = false;
        //   this.block3 = false;
        //   this.block4 = false;
        //   this.block5 = false;
        // } else if (index = "3") {
        //   console.log('id3')
        //   this.block3 = true;
        //   this.block1 = false;
        //   this.block2 = false;
        //   this.block0 = false;
        //   this.block4 = false;
        //   this.block5 = false;
        // } else if (index = "4") {
        //   this.block4 = true;
        //   console.log('id4')
        //   this.block1 = false;
        //   this.block2 = false;
        //   this.block3 = false;
        //   this.block0 = false;
        //   this.block5 = false;
        // } else if (index = "5") {
        //   console.log('id5')

        //   this.block5 = true;
        //   this.block1 = false;
        //   this.block2 = false;
        //   this.block3 = false;
        //   this.block4 = false;
        //   this.block0 = false;
        // } else if (index = "6") {
        //   console.log('id6')

        //   this.block6 = true;
        //   this.block0 = false;
        //   this.block2 = false;
        //   this.block3 = false;
        //   this.block4 = false;
        //   this.block5 = false;
        //   this.block1 = false;

        // }else{
        //   console.log('111')
        // }
      },
      // 点击上传图片事件
      close() {},
      //商品类型
      getcommodity() {
        localStorage.setItem("isToken", true);
        this.$axios.getcommodity({}).then((res) => {
          this.list2 = res.data;
          console.log(this.list2);
        });
        
      },
      // 添加商品弹框
      addlist() {
        this.dialogTableVisible = true; //显示弹框
        console.log(this.productSpecs);
        //  this.getcommodity()
        this.activityProduct();

        // this.diagarr = [];

        // 后台添加活动商品列表
      },
      activityProduct() {
        this.$axios
          .activityProduct({
            typeId: this.addShop.typeId || 0,
            propertyTypeId: this.addShop.propertyTypeId || 1,
            productName: this.addShop.productName || "",
          })
          .then((res) => {
            console.log(res);
            this.table = res.data;

            // let arr = JSON.parse(JSON.stringify(res.data));
            // arr.forEach((item) => {
            //   item.productSpecs.forEach((items) => {
            //     items.is = false;
            //   });
            // });
            // this.table = arr;
            // console.log(this.table);
          });
      },

      // 关闭按钮
      cancel() {
        this.showvisitable = true;
        this.imgpath = null;
      },

      // 删除指定规格
      handleDelete(index, row) {
        console.log(this.productSpecs, index, row);
        this.productSpecs.splice(index);
        console.log(this.productSpecs);
      },
    },
    computed: {},
    watch: {
      // 当弹框里面的数据发生变化时 将拿到的值给的页面表格的数据
      diagarr(item) {
        console.log(...item);
        console.log(this.productSpecs);
        this.productSpecs = item;
      },
      // "productSpecs.stockCounts": {
      //   handler(newValue, oldValue) {
      //     console.log(newValue, oldValue);
      //   },
      // },
    },
  };
</script>


<style scoped>
  /* //调整表头高度 */

  .activityquery {
    width: 100%;
    height: 70px;
    margin: 20px auto;
  }

  .green {
    position: relative;
    float: left;
    width: 5px;
    height: 100%;
    background-color: #6090ec;
  }

  .primary {
    margin: 20px;
    border-radius: 5px;
    background-color: #6090ec;
    border-color: transparent;
  }

  .select1 {
    /* margin-left: 580px; */
    width: 150px;
    border-color: transparent;
  }

  .inputbox {
    display: inline-block;
    margin-left: 10px;
  }

  .querybutton {

    background-color: #6090ec;
  }

  .activitytabledata {
    width: 96%;
    margin: 20px auto;
  }

  .yishen {
    height: 30px;
    text-align: center;
    background: #6090ec;
    color: #fff;
  }

  .edit {
    height: 30px;
    text-align: center;
    background: #6090ec;
    color: #fff;
  }

  .delt {
    height: 30px;
    text-align: center;
    background: #ff5722;
    color: #fff;
  }

  /* 添加的页面 */
  .activity-add {
    width: 96%;
    margin: 20px auto;
  }

  .inputboxname {
    display: flex;
  }

  .inputboxname .elinput {
    width: 80%;
  }

  .inputboxname span {
    width: 100px;
    line-height: 30px;
    text-align: center;
    display: inline-block;
  }

  .divider .el-divider .el-divider__text {
    font-size: 20px;
  }

  .activitytype {
    width: 90%;
    margin: 20px 15px;
  }

  .activitytype .activitytypeone {
    display: flex;
    width: 100%;
  }

  .activitytype .leixing {
    margin-right: 20px;
  }

  .activitytype div .son {
    width: 80px;
    height: 30px;
    border-radius: 2px;
    margin-right: 30px;
    border: 1px solid #ccc;
  }

  .activitytype div .son span:nth-of-type(1) {
    display: inline-block;
    width: 50px;
    line-height: 30px;
    background-color: #5fb878;
    text-align: center;
    color: #fff;
  }

  .activitytype div p span:nth-of-type(2) {
    width: 20px;
    text-align: center;
    line-height: 30px;
    color: #5fb878;
  }

  .groupbuying {
    width: 1348px;
    /* height:; */
    margin-top: 20px;
  }

  .groupbuying>p {
    display: inline-flex;
  }

  .groupbuying p span:nth-of-type(1) {
    width: 100px;
    text-indent: 2.8rem;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    margin-left: -5px;
  }

  .groupbuying-div {
    display: flex;
    text-align: center;
    line-height: 40px;
    margin: 20px 0px 0px -11px;
  }

  .groupbuying-div span {
    display: inline-block;
    width: 100px;
    text-align: center;
    line-height: 40px;
  }

  .groupbuying-div .el-input {
    width: 30%;
    text-align: center;
    line-height: 40px;
  }

  .groupbuying .block {
    display: inline-flex;
    margin: 20px;
  }

  .block span {
    margin-right: 5px;
  }

  .groupbuying .stars {
    display: inline-block;
    color: red !important;
    margin-left: 5px;
    line-height: 45px !important;
  }

  .shenhe {
    margin: 15px;
  }

  .shenhespan {
    font-style: normal;
    margin-right: 10px;
  }

  .plus {
    height: 30px;
    font-size: 12px;
    line-height: 8px;
    text-align: center;
    background-color: #6090ec;
    color: #fff;
  }

  .cancel {
    width: 100px;
    background-color: #6090ec;
    color: white;
  }

  .addOrUpdateSpu {
    width: 100px;
    background-color: #6090ec;
    color: white;
  }

  .double {
    margin-left: 80px;
    font-size: 20px;
    margin-bottom: 20px;
    color: #a2a2a2;
  }

  /* .activityquery .el-select .el-input */

  .attrul li {
    display: inline-flex;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-left: 15px;
  }

  .attrul li span:nth-of-type(1) {
    width: 100%;
    color: #fff;
    display: inline-block;
    height: 40px;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    background-color: #c9c9c9;
  }

  .attrul li i:nth-of-type(1) {
    width: 50px;
    text-indent: 0.2rem;
    line-height: 40px;
    color: #fff;
  }

  .act {
    color: #6090ec !important;
  }

  .activeClass {
    display: inline-block;
    width: 100%;
    height: 40px;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #6090ec !important;
  }

  .groupbuying-div .el-input {
    width: 16%;
    margin-left: 5px;
  }

  .groupbuying .block .demonstration {
    line-height: 45px;
    margin-right: 10px;
  }

  .el-input {
    width: 70%;
    margin-left: 5px;
  }

  #vip {
    display: block;
    margin-left: 10px;
    width: 165px;
  }

  #picture {
    position: relative;
    height: 300px;
    margin-top: 20px;
    margin-left: 20px;
  }

  #imgpath {
    width: 124px;
    height: 41px;
    margin-left: 10px;
  }

  #picturebox {
    display: block;
    border: 1px solid #ccc;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 54px;
    left: 80px;
  }

  .close {
    position: absolute;
    top: 0;
    right: 0px;
  }

  .quilleditor {
    display: inline-flex;
    height: 300px;
    margin-left: 15px;
  }

  .shenhe {
    display: block !important;
    width: 100px;
    margin-left: 20px;
  }

  #group {
    display: block !important;
    width: 100px;
    margin-top: 60px;
    margin-bottom: 20px;
    margin-left: 20px;
  }

  #diag p {
    width: 250px;
    float: left;
    line-height: 30px;
    margin-top: 20px;
    margin-right: 15px;
  }

  .el-dialog__body {
    width: 880px;
    height: 500px !important;
  }

  .el-input__inner {
    width: 50px;
  }

  #butn {
    margin-top: 76px;
  }

  #picturebox img {
    width: 100%;
    height: 100%;
  }

  .my-label {
    background: #e1f3d8;
  }

  .my-content {
    background: #fde2e2;
  }

  .classlei {
    margin: 20px;
  }

  .el-descriptions-row .el-descriptions-item__cell {
    border: 1px solid red !important;
  }

  .el-descriptions-item__cell {
    border: 1px solid red !important;
  }

  .shop_b {
    border-top: 1px solid #ebeef5;
    line-height: 35px;
    margin-top: 10px;
  }

  .shop_b_c {
    display: flex;
    background: #fafafa;
    border-right: 0px;
    line-height: 35px;
    border-right: 1px solid #ebeef5;
    border-top: 1px solid #ebeef5;
  }

  .shop_b_c>span {
    border-left: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    width: 15%;
    padding-left: 10px;
  }

  .shop_b_c>span:nth-child(1) {
    width: 5%;
  }

  .shop_b_c>span:nth-child(2) {
    width: 35%;
  }

  .shop_b_t {
    background: #fafafa;
    border-left: 1px solid #fafafa;
    border-bottom: 1px solid #fafafa;
    line-height: 35px;
    padding-left: 10px;
  }

  #shenhe {
    width: 30px;
    font-size: 10px;
    /* background-color: #1E9FFF; */
    color: #fff;
    border: 0;
  }

  .redcolor {
    background-color: #ff5722 !important;
  }

  .bluecolor {
    background-color: #6090ec;
  }
</style>